<template>
  <view class="document-dashboard">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <!-- <view class="nav-left" @click="goBack">
        <u-icon name="arrow-left" color="#ffffff" size="24"></u-icon>
      </view> -->
      <view class="nav-center">
        <text class="nav-title">工作台</text>
      </view>
      <!-- <view class="nav-right"> </view> -->
    </view>

    <view class="content-area">
      <!-- 快捷操作区域 -->
      <view class="quick-actions" v-if="quickActionData.length > 0">
        <view class="section-header">
          <text class="section-title">快速开始</text>
        </view>
        <view class="actions-grid">
          <view
            class="action-card"
            v-for="(action, index) in quickActionData"
            :key="index"
            @click="handleQuickActionClick(action.route)"
          >
            <view class="card-content">
              <view class="card-icon" :style="{ background: action.gradient }">
                <u-icon :name="action.iconName" color="#ffffff" size="32"></u-icon>
              </view>
              <view class="card-info">
                <text class="card-title">{{ action.title }}</text>
                <text class="card-description">{{ action.description }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 功能模块区域 -->
      <view class="todo-section">
        <view class="section-header">
          <text class="section-title">功能模块</text>
          <text class="section-subtitle">快速处理您的公文任务</text>
        </view>

        <!-- 加载状态 -->
        <view class="loading-state" v-if="loading">
          <text class="loading-text">加载中...</text>
        </view>

        <view class="todo-grid" v-else>
          <view
            class="todo-card"
            v-for="(item, index) in statData"
            :key="index"
            :class="{ clickable: item.route }"
            @click="handleCardClick(item.route, item.title)"
          >
            <view class="card-background" :style="{ background: item.gradient }"></view>
            <view class="todo-content">
              <view class="todo-left">
                <view class="todo-icon" :style="{ backgroundColor: item.color }">
                  <u-icon :name="item.iconName" color="#ffffff" size="28"></u-icon>
                </view>
                <text class="todo-value">{{ item.value }}</text>
              </view>
              <view class="todo-right">
                <text class="todo-title">{{ item.title }}</text>
                <text class="todo-description">{{ item.description }}</text>
                <view class="todo-footer">
                  <text class="action-hint">
                    查看详情
                    <u-icon name="arrow-right" color="#999" size="12" class="arrow-icon"></u-icon>
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 自定义TabBar -->
    <CustomTabBar />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { UserManager } from '@/utils/user'
import CustomTabBar from '@/custom-tab-bar/index.vue'

// 用户信息
const userInfo = computed(() => {
  return UserManager.getFullUserInfo()
})

// 当前时间
const currentDate = ref('')
const currentTime = ref('')

// 统计数据（与网页端保持一致，对应后端DashboardStatisticsVO的8个字段）
const stats = ref({
  todoCount: 0, // 待办发文数量
  redHeaderCount: 0, // 公文套红数量
  sealCount: 0, // 公文签章数量
  distributeCount: 0, // 公文分发数量
  receiveTodoCount: 0, // 待办收文数量
  internalReceiveCount: 0, // 待阅发文数量
  draftCount: 0, // 退回发文数量（草稿箱）
  receiveDraftCount: 0, // 退回收文数量（收文草稿）
})

// 加载状态
const loading = ref(false)

// 用户菜单权限
const userMenuPaths = ref<string[]>([])

// 问候语
const greeting = computed(() => {
  const hour = new Date().getHours()
  if (hour < 6) return '夜深了'
  if (hour < 9) return '早上好'
  if (hour < 12) return '上午好'
  if (hour < 14) return '中午好'
  if (hour < 18) return '下午好'
  if (hour < 22) return '晚上好'
  return '夜深了'
})
// 返回上一页
const goBack = () => {
  const pages = getCurrentPages()
  // 如果页面栈只有1个页面，说明无法返回，直接跳转到首页
  if (pages.length <= 1) {
    console.log('[goBack] 页面栈只有1个，跳转到首页')
    uni.reLaunch({
      url: '/pages/index/index',
    })
  } else {
    // 有多个页面，执行返回操作
    console.log('[goBack] 执行返回操作')
    uni.navigateBack({
      delta: 1,
    })
  }
}
// 获取当前日期
const getCurrentDate = () => {
  const date = new Date()
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${year}年${month}月${day}日`
}

// 获取当前星期
const getCurrentWeekday = () => {
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  return weekdays[new Date().getDay()]
}

// 检查用户是否有指定菜单权限
const hasMenuPermission = (menuPath: string): boolean => {
  return userMenuPaths.value.includes(menuPath)
}

// 检查用户是否有任一菜单权限
const hasAnyMenuPermission = (menuPaths: string[]): boolean => {
  return menuPaths.some((menuPath) => userMenuPaths.value.includes(menuPath))
}

// 快速操作卡片 - 根据用户菜单权限控制显示
const quickActionData = computed(() => {
  const allQuickActions = [
    {
      title: '登记收文',
      description: '接收外部来文并进行登记处理',
      iconName: 'plus-circle-fill',
      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      route: '/pages/document/receive/darf/index',
      requiredMenuPaths: ['/receive/register', '/receive'],
    },
    // 手机端不支持新建发文，已移除
    // {
    //   title: '新建发文',
    //   description: '创建内部公文并发起审批流程',
    //   iconName: 'file-text',
    //   gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    //   route: '/pages/document/send/create',
    //   requiredMenuPaths: ['/document/add-draft', '/document'],
    // },
  ]

  return allQuickActions.filter((action) => {
    return hasAnyMenuPermission(action.requiredMenuPaths)
  })
})

// 统计数据 - 根据用户菜单权限控制显示（与网页端保持一致的8张卡片）
const statData = computed(() => {
  const allStats = [
    {
      title: '退回收文',
      value: stats.value.receiveDraftCount.toString(),
      iconName: 'account',
      color: '#FF6B6B',
      gradient: 'linear-gradient(135deg, #FF6B6B 0%, #ee5a6f 100%)',
      description: '需要修改或补充信息的收文',
      route: '/pages/document/receive/darf/index',
      requiredMenuPaths: ['/receive/draft', '/receive'],
    },
    {
      title: '待办收文',
      value: stats.value.receiveTodoCount.toString(),
      iconName: 'edit-pen-fill',
      color: '#409EFF',
      gradient: 'linear-gradient(135deg, #409EFF 0%, #2d8cf0 100%)',
      description: '需要您审批或处理的收文任务',
      route: '/pages/document/receive/todo/index',
      requiredMenuPaths: ['/receive/todo', '/receive'],
    },
    {
      title: '已审批收文',
      value: '', // 后端暂无统计，显示占位符
      iconName: 'checkmark-circle-fill',
      color: '#9C27B0',
      gradient: 'linear-gradient(135deg, #9C27B0 0%, #ba68c8 100%)',
      description: '查看您审批过的收文记录',
      route: '/pages/document/receive/my-approval/index',
      requiredMenuPaths: ['/receive/todo', '/receive'],
    },
    // {
    //   title: '退回发文',
    //   value: stats.value.draftCount.toString(),
    //   iconName: 'arrow-downward',
    //   color: '#FF9800',
    //   gradient: 'linear-gradient(135deg, #FF9800 0%, #fb8c00 100%)',
    //   description: '被退回需要修改的发文草稿',
    //   route: '/pages/document/send/draft',
    //   requiredMenuPaths: ['/document', '/document/draft'],
    // },
    {
      title: '被退回的发文',
      value: stats.value.draftCount.toString(),
      iconName: 'account-fill',
      color: '#FF9800',
      gradient: 'linear-gradient(135deg, #FF9800 0%, #fb8c00 100%)',
      description: '被退回需要修改的发文草稿',
      route: '/pages/document/send/index?tab=my',
      requiredMenuPaths: ['/document'],
    },
    {
      title: '待办发文',
      value: stats.value.todoCount.toString(),
      iconName: 'edit-pen-fill',
      color: '#13c2c2',
      gradient: 'linear-gradient(135deg, #13c2c2 0%, #0fb9b1 100%)',
      description: '等待您审批的发文申请',
      route: '/pages/document/send/index?tab=todo',
      requiredMenuPaths: ['/document/todo', '/document/approval'],
    },
    {
      title: '公文套红',
      value: stats.value.redHeaderCount.toString(),
      iconName: 'star-fill',
      color: '#E6A23C',
      gradient: 'linear-gradient(135deg, #E6A23C 0%, #ebb563 100%)',
      description: '需要套用红头文件格式的公文',
      route: '/pages/document/send/index?tab=redHeader',
      requiredMenuPaths: ['/document/red-header'],
    },
    {
      title: '公文签章',
      value: stats.value.sealCount.toString(),
      iconName: 'pushpin-fill',
      color: '#F56C6C',
      gradient: 'linear-gradient(135deg, #F56C6C 0%, #f78989 100%)',
      description: '等待加盖电子印章的公文',
      route: '/pages/document/send/index?tab=seal',
      requiredMenuPaths: ['/document/seal'],
    },
    {
      title: '公文分发',
      value: stats.value.distributeCount.toString(),
      iconName: 'share-fill',
      color: '#67C23A',
      gradient: 'linear-gradient(135deg, #67C23A 0%, #85ce61 100%)',
      description: '准备分发到各部门的公文',
      route: '/pages/document/send/index?tab=distribute',
      requiredMenuPaths: ['/document/distribute'],
    },
    {
      title: '已审批发文',
      value: '', // 后端暂无统计，显示占位符
      iconName: 'checkmark-circle-fill',
      color: '#67c23a',
      gradient: 'linear-gradient(135deg, #67c23a 0%, #85ce61 100%)',
      description: '查看您审批过的发文记录',
      route: '/pages/document/send/my-approval/index',
      requiredMenuPaths: ['/document/approval'],
    },
    {
      title: '待阅发文',
      value: stats.value.internalReceiveCount.toString(),
      iconName: 'eye-fill',
      color: '#9C27B0',
      gradient: 'linear-gradient(135deg, #9C27B0 0%, #ba68c8 100%)',
      description: '需要您查阅的内部发文',
      route: '/pages/document/receive/read/index',
      requiredMenuPaths: ['/document/my-internal-receive'],
    },
    {
      title: '所有收文',
      value: '', // 后端API暂不支持此统计，显示占位符
      iconName: 'grid-fill',
      color: '#52c41a',
      gradient: 'linear-gradient(135deg, #52c41a 0%, #73d13d 100%)',
      description: '查看本单位所有收到的公文',
      route: '/pages/document/receive/my-receive/index?tab=receive',
      requiredMenuPaths: ['/receive/all-receive'],
    },
    {
      title: '所有发文',
      value: '', // 后端API暂不支持此统计，显示占位符
      iconName: 'grid-fill',
      color: '#1890ff',
      gradient: 'linear-gradient(135deg, #1890ff 0%, #40a9ff 100%)',
      description: '查看本单位所有发出的公文',
      route: '/pages/document/receive/my-send/index?tab=receive',
      requiredMenuPaths: ['/document/all-documents'],
    },
  ]

  return allStats.filter((stat) => {
    // 如果 requiredMenuPaths 为空数组，表示所有用户都可以访问
    if (!stat.requiredMenuPaths || stat.requiredMenuPaths.length === 0) {
      return true
    }
    return hasAnyMenuPermission(stat.requiredMenuPaths)
  })
})

// 跳转到对应页面
const handleCardClick = (route: string, title?: string) => {
  // 检查是否是退回发文
  if (title === '退回发文') {
    uni.showModal({
      title: '温馨提示',
      content:
        '退回发文需要在网页端进行办理，手机端暂不支持此功能。\n\n请使用电脑浏览器访问系统进行处理。',
      showCancel: false,
      confirmText: '我知道了',
      confirmColor: '#667eea',
    })
    return
  }

  if (route) {
    uni.navigateTo({
      url: route,
      fail: () => {
        uni.showToast({
          title: '页面开发中',
          icon: 'none',
        })
      },
    })
  }
}

// 快速操作卡片点击处理
const handleQuickActionClick = (route: string) => {
  if (route) {
    uni.navigateTo({
      url: route,
      fail: () => {
        uni.showToast({
          title: '页面开发中',
          icon: 'none',
        })
      },
    })
  }
}

// 功能模块 - 根据用户菜单权限控制显示
const featureModules = computed(() => {
  const allFeatures = [
    {
      title: '我的收文',
      description: '查看所有收到的公文',
      iconText: '📨',
      color: '#409EFF',
      route: '/pages/document/receive/darf/index',
      requiredMenuPaths: ['/receive', '/receive/draft'],
    },
    {
      title: '待办收文',
      description: '待处理的收文任务',
      iconText: '📋',
      color: '#13c2c2',
      route: '/pages/document/receive/todo/index',
      requiredMenuPaths: ['/receive/todo', '/receive'],
    },

    {
      title: '已审批发文',
      description: '查看您审批过的收文记录',
      iconText: '✅',
      color: '#9C27B0',
      route: '/pages/document/receive/my-approval/index',
      requiredMenuPaths: ['/receive/todo', '/receive'],
    },
    {
      title: '我的发文',
      description: '查看所有发出的公文',
      iconText: '📤',
      color: '#67C23A',
      route: '/pages/document/send/index',
      requiredMenuPaths: ['/document', '/document/draft'],
    },
    {
      title: '待办发文',
      description: '待处理的发文任务',
      iconText: '📝',
      color: '#E6A23C',
      route: '/pages/document/send/index?tab=todo',
      requiredMenuPaths: ['/document/todo', '/document/approval'],
    },
  ]

  return allFeatures.filter((feature) => {
    return hasAnyMenuPermission(feature.requiredMenuPaths)
  })
})

// 功能模块点击处理
const handleFeatureClick = (route: string) => {
  if (route) {
    uni.navigateTo({
      url: route,
      fail: () => {
        uni.showToast({
          title: '页面开发中',
          icon: 'none',
        })
      },
    })
  }
}

// 更新当前时间我的image.png
const updateTime = () => {
  const now = new Date()
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long',
  })
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
  })
}

// 加载用户菜单权限
const loadUserMenuPaths = async () => {
  try {
    // 调用真实API获取用户菜单权限
    const { getRoleNamesByUserId } = await import('@/Api/role')
    const response = await getRoleNamesByUserId()

    if (response.code === 200 && response.data) {
      userMenuPaths.value = response.data
      console.log('当前用户菜单权限:', userMenuPaths.value)
    } else {
      // API调用失败，使用默认权限（显示所有菜单）
      userMenuPaths.value = [
        '/receive',
        '/receive/draft',
        '/receive/todo',
        '/document',
        '/document/draft',
        '/document/todo',
        '/document/approval',
        '/document/red-header',
        '/document/seal',
        '/document/distribute',
        '/document/my-internal-receive',
      ]
      console.warn('获取用户菜单权限失败，使用默认权限')
    }
  } catch (error) {
    console.error('获取用户菜单权限失败:', error)
    // 异常情况，使用默认权限
    userMenuPaths.value = [
      '/receive',
      '/receive/draft',
      '/receive/todo',
      '/document',
      '/document/draft',
      '/document/todo',
      '/document/approval',
      '/document/red-header',
      '/document/seal',
      '/document/distribute',
      '/document/my-internal-receive',
    ]
  }
}

// 加载仪表板数据
const loadDashboardData = async () => {
  try {
    loading.value = true

    // 调用真实API获取统计数据
    const { getDashboardStatistics } = await import('@/Api/document')
    const response = await getDashboardStatistics()

    if (response.code === 200 && response.data) {
      // 与网页端保持一致，只更新后端API返回的8个字段
      stats.value = {
        todoCount: response.data.todoCount || 0,
        redHeaderCount: response.data.redHeaderCount || 0,
        sealCount: response.data.sealCount || 0,
        distributeCount: response.data.distributeCount || 0,
        receiveTodoCount: response.data.receiveTodoCount || 0,
        internalReceiveCount: response.data.internalReceiveCount || 0,
        draftCount: response.data.draftCount || 0,
        receiveDraftCount: response.data.receiveDraftCount || 0,
      }
    } else {
      // 如果API调用失败，设置为0
      stats.value = {
        todoCount: 0,
        redHeaderCount: 0,
        sealCount: 0,
        distributeCount: 0,
        receiveTodoCount: 0,
        internalReceiveCount: 0,
        draftCount: 0,
        receiveDraftCount: 0,
      }
    }

    console.log('更新后的统计数据:', stats.value)
  } catch (error) {
    console.error('加载仪表板数据失败:', error)
    // API调用失败时，设置为0而不是显示错误提示
    stats.value = {
      todoCount: 0,
      redHeaderCount: 0,
      sealCount: 0,
      distributeCount: 0,
      receiveTodoCount: 0,
      internalReceiveCount: 0,
      draftCount: 0,
      receiveDraftCount: 0,
    }
  } finally {
    loading.value = false
  }
}

// 页面显示时隐藏原生TabBar
onShow(() => {
  uni.hideTabBar({
    animation: false,
  })
})

// 页面加载时获取数据
onMounted(async () => {
  console.log('Document Dashboard 页面已加载')
  updateTime()
  // 每秒更新时间
  setInterval(updateTime, 1000)
  // 确保用户信息存在
  await UserManager.ensureUserInfo()
  // 先加载用户菜单权限，再加载仪表板数据
  await loadUserMenuPaths()
  await loadDashboardData()
})
</script>

<style lang="scss" scoped>
.document-dashboard {
  height: 100vh;
  background: #f5f7fa;
  padding: 0;
  display: flex;
  flex-direction: column;

  /* 顶部背景区域 */
  .header-bg {
    background: url('http://111.53.165.56:8000/static/img/mobile/bj01.png') no-repeat center;
    background-size: cover;
    padding-bottom: 40rpx;
    position: relative;
    overflow: hidden;
  }

  /* 顶部导航 */
  .nav-header {
    background: linear-gradient(135deg, #1a3582 0%, #1890ff 100%);
    padding: 46px 32rpx 20rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;

    .nav-left {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .back-icon {
        font-size: 40rpx;
        font-weight: bold;
      }
    }

    .nav-center {
      flex: 1;
      text-align: center;

      .nav-title {
        font-size: 36rpx;
        font-weight: bold;
      }
    }

    .nav-right {
      min-width: 22px;
      .save-btn {
        font-size: 28rpx;
        padding: 12rpx 24rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 12rpx;
      }
    }
  }

  .content-area {
    margin-top: 100px;
  }

  /* 区域标题 */
  .section-header {
    margin-bottom: 32rpx;
    padding: 0 32rpx;

    .section-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #1a1a1a;
      position: relative;
      padding-left: 24rpx;
      margin-bottom: 8rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 10rpx;
        height: 32rpx;
        background: linear-gradient(to bottom, #4facfe, #00f2fe);
        border-radius: 5rpx;
        box-shadow: 0 2rpx 8rpx rgba(79, 172, 254, 0.3);
      }
    }

    .section-subtitle {
      font-size: 26rpx;
      color: #999;
      padding-left: 24rpx;
      display: block;
    }

    .view-all {
      font-size: 26rpx;
      color: #4facfe;
    }
  }

  /* 快捷操作区域 */
  .quick-actions {
    padding: 0 0 32rpx;

    .actions-grid {
      display: flex;
      gap: 24rpx;
      padding: 0 32rpx;

      .action-card {
        flex: 1;
        background: white;
        border-radius: 24rpx;
        padding: 32rpx 24rpx;
        box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        border: 1rpx solid rgba(79, 172, 254, 0.1);

        &:active {
          transform: translateY(-4rpx);
          box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
        }

        .card-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;

          .card-icon {
            width: 96rpx;
            height: 96rpx;
            border-radius: 24rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20rpx;
            box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
            position: relative;

            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              border-radius: 24rpx;
              background: linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.2) 0%,
                rgba(255, 255, 255, 0) 100%
              );
            }
          }

          .card-info {
            .card-title {
              display: block;
              font-size: 30rpx;
              font-weight: bold;
              color: #333;
              margin-bottom: 8rpx;
            }

            .card-description {
              display: block;
              font-size: 24rpx;
              color: #999;
              line-height: 1.4;
            }
          }
        }
      }
    }
  }

  /* 功能模块区域 */
  .todo-section {
    padding: 0 0 32rpx;

    .loading-state {
      text-align: center;
      padding: 80rpx 0;

      .loading-text {
        font-size: 28rpx;
        color: #999;
      }
    }

    .todo-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16rpx;
      padding: 0 16rpx;

      .todo-card {
        background: white;
        border-radius: 20rpx;
        padding: 24rpx 20rpx;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
        border: 1rpx solid rgba(79, 172, 254, 0.08);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        min-height: 160rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &.clickable:active {
          transform: translateY(-2rpx) scale(0.98);
          box-shadow: 0 8rpx 28rpx rgba(0, 0, 0, 0.15);

          .arrow-icon {
            transform: translateX(4rpx);
          }
        }

        .card-background {
          position: absolute;
          top: 0;
          right: 0;
          width: 120rpx;
          height: 120rpx;
          opacity: 0.06;
          border-radius: 50%;
          z-index: 0;
        }

        .todo-content {
          position: relative;
          z-index: 1;
          display: flex;
          flex-direction: column;
          height: 100%;

          .todo-left {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16rpx;

            .todo-icon {
              width: 64rpx;
              height: 64rpx;
              border-radius: 16rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
              position: relative;
              flex-shrink: 0;

              &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 16rpx;
                background: linear-gradient(
                  135deg,
                  rgba(255, 255, 255, 0.4) 0%,
                  rgba(255, 255, 255, 0.1) 100%
                );
              }
            }

            .todo-value {
              font-size: 36rpx;
              font-weight: bold;
              background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              line-height: 1;
              margin-left: 12rpx;
            }
          }

          .todo-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .todo-title {
              font-size: 28rpx;
              font-weight: bold;
              color: #1a1a1a;
              letter-spacing: 0.5rpx;
              margin-bottom: 8rpx;
              line-height: 1.3;
            }

            .todo-description {
              font-size: 24rpx;
              color: #666;
              line-height: 1.4;
              flex: 1;
              margin-bottom: 12rpx;
            }

            .todo-footer {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .action-hint {
                font-size: 22rpx;
                color: #999;
                display: flex;
                align-items: center;

                .arrow-icon {
                  margin-left: 4rpx;
                  transition: transform 0.3s ease;
                }
              }
            }
          }
        }

        // 不同类型的卡片特殊样式
        // &:nth-child(odd) {
        //   .card-background {
        //     top: 0;
        //     right: 0;
        //   }
        // }

        // &:nth-child(even) {
        //   .card-background {
        //     top: 0;
        //     left: 0;
        //   }
        // }

        // 为前两个卡片添加特殊的顶部装饰条
        // &:nth-child(1),
        // &:nth-child(2) {
        //   &::before {
        //     content: '';
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //     right: 0;
        //     height: 4rpx;
        //     background: linear-gradient(90deg, #4facfe 0%, #00f2fe 50%, #667eea 100%);
        //     border-radius: 20rpx 20rpx 0 0;
        //   }
        // }

        // 为第三四个卡片添加不同的装饰
        // &:nth-child(3),
        // &:nth-child(4) {
        //   &::before {
        //     content: '';
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //     right: 0;
        //     height: 4rpx;
        //     background: linear-gradient(90deg, #fa709a 0%, #fee140 50%, #f093fb 100%);
        //     border-radius: 20rpx 20rpx 0 0;
        //   }
        // }

        // 悬停效果
        &.clickable:hover {
          transform: translateY(-2rpx);
          box-shadow: 0 8rpx 28rpx rgba(0, 0, 0, 0.12);
        }
      }
    }
  }

  /* 功能模块区域 */
  .feature-section {
    padding: 0 0 40rpx;

    .feature-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;
      padding: 0 32rpx;

      .feature-card {
        width: calc(50% - 8rpx);
        background: white;
        border-radius: 16rpx;
        padding: 28rpx 20rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: all 0.3s ease;

        &:active {
          opacity: 0.8;
        }

        .feature-icon {
          width: 72rpx;
          height: 72rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 16rpx;
          opacity: 0.9;

          .icon-text {
            font-size: 36rpx;
          }
        }

        .feature-info {
          .feature-title {
            display: block;
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 6rpx;
          }

          .feature-desc {
            display: block;
            font-size: 24rpx;
            color: #999;
            line-height: 1.3;
          }
        }
      }
    }
  }
}
</style>
